<script setup>
import {computed, onMounted, ref,inject} from "vue";
import {router} from "@/router/index.js"
import store from '@/store/index.js'
import axios from "@/axios.js"
import {ElMessage} from "element-plus";


const token = computed(() => {
  return localStorage.getItem('token');
});

const user = computed(() => {
  const userData = localStorage.getItem('user');
  if (userData) {
    return JSON.parse(userData);
  }
  return null;
});

// 使用 inject 获取刷新方法和数据
const refreshMethod = inject('refreshMethod');
const refreshKey = inject('refreshKey');

const refresh = () => {
  // 调用刷新方法
  refreshMethod();
};


const baseUrl = '../../public/img/'

const logout = ()=>{
  axios.get(`/logout?token=${token.value}`).then(res=>{
    ElMessage.error("退出登录")
    store.commit("resetState")
    store.commit("resetUserState")
    refresh()
    router.push("/login")
  })

}

</script>

<template>
  <div class="navbar" >
    <div class="logo">基于SpringBoot的车辆租赁系统</div>
    <ul class="nav-menu">
      <li><router-link to="/">首页</router-link></li>
      <li><router-link to="/rental">租车服务</router-link></li>
      <li><router-link to="/me" v-if="user!=null" >我的</router-link></li>
      <li ><router-link  v-if="user!=null" to="" @click="logout" > 退出登录</router-link></li>
      <li ><router-link v-if="user==null" to="/login">登录/注册</router-link></li>
      <li><router-link v-if="user!=null && user.type == 2"  to="/admin/home">后台管理</router-link></li>
      <img v-if="user!=null" :src="baseUrl+user.headImg" style="width: 30px;height: 30px;border-radius: 15px"/>
    </ul>
  </div>
</template>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #162D46;
}

.logo {
  margin-left: 50px;
  font-size: 24px;
  font-weight: bold;
  color: #FFC75D;

}

.nav-menu {
  display: flex;
}

.nav-menu li {
  list-style: none;
  margin-right: 20px;
}

.nav-menu li a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  transition: color 0.3s; /* 添加过渡效果 */
}

.nav-menu li a:hover {
  color: #FFC75D; /* 设置文本移上去的颜色 */
}


</style>